<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, onMounted, ref } from 'vue'
import { getSoilData } from '@/api/environmentalDataController.ts'
import { useEnvironmentDataStore } from '@/stores/useEnvironmentDataStore.ts'

const dataTimestampList = ref<string[]>()
const soilFertilizerConcentrationList = ref<number[]>()
const soilPhList = ref<number[]>()
const environmentDataStore = useEnvironmentDataStore()

const fetchSoilData = async () => {
  const res = await getSoilData()
  dataTimestampList.value = res.data.data?.dataTimestampList
  soilFertilizerConcentrationList.value = res.data.data?.soilFertilizerConcentrationList
  environmentDataStore.setSoilFertilizerConcentration(soilFertilizerConcentrationList.value ?? [])
  soilPhList.value = res.data.data?.soilPhList
  environmentDataStore.setSoilPh(soilPhList.value ?? [])
}

onMounted(() => {
  fetchSoilData()
})

const options = computed(() => {
  const colors = ['#337ab7', '#f0ad4e'] // 肥料浓度用蓝色，PH值用橙色
  return {
    color: colors,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross', // 十字准星指示器，方便同时查看两个轴的数据
      },
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    legend: {
      data: ['土壤肥料浓度', '土壤PH值'],
      top: 10, // 图例位置靠上
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true,
        },
        // X轴为一天中每隔2小时的时间点
        data: dataTimestampList.value,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '土壤肥料浓度',
        position: 'left', // 浓度轴在左侧
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[0], // 与柱状图同色
          },
        },
        axisLabel: {
          formatter: '{value} mg/kg', // 浓度单位
        },
        splitLine: {
          lineStyle: {
            type: 'dashed', // 虚线网格，区分两个Y轴
          },
        },
      },
      {
        type: 'value',
        name: '土壤PH值',
        position: 'right', // PH轴在右侧
        alignTicks: true,
        axisLine: {
          show: true,
          lineStyle: {
            color: colors[1], // 与折线图同色
          },
        },
        axisLabel: {
          formatter: '{value}', // PH值无单位
        },
        min: 4, // PH值常见范围为4-10
        max: 10,
        splitLine: {
          show: false, // 不显示第二条Y轴的网格线，避免混乱
        },
      },
    ],
    series: [
      {
        name: '土壤肥料浓度',
        type: 'bar', // 柱状图展示浓度
        data: soilFertilizerConcentrationList.value,
        // 柱状图样式优化
        itemStyle: {
          borderRadius: 4, // 柱形边角圆润化
        },
        barWidth: '60%', // 柱形宽度，避免过宽或过窄
      },
      {
        name: '土壤PH值',
        type: 'line', // 折线图展示PH值
        yAxisIndex: 1, // 关联到右侧的PH值Y轴
        data: soilPhList.value,
        // 折线图样式优化
        symbol: 'circle', // 数据点为圆形
        symbolSize: 8, // 数据点大小
        smooth: true, // 平滑曲线
        lineStyle: {
          width: 3, // 线条粗细
        },
        // 数据点样式
        itemStyle: {
          borderWidth: 2,
          borderColor: '#fff', // 数据点白色边框，更醒目
        },
      },
    ],
  }
})
</script>

<template>
  <div class="data-soil-analyze">
    <a-card title="土壤肥料浓度和PH值分析">
      <v-chart :option="options" style="height: 60vh; max-width: 100%" />
    </a-card>
  </div>
</template>

<style scoped></style>
